<template>
  <Layout>
    <template v-slot:content>
      <div :style="contentStyle" class="box flex justify-center items-center">
        <div class="w-full px-[100px]">
          <a-typography>
            <a-typography-title :level="2">
              <Icon icon="UserAddOutlined"></Icon>
              用户登录
            </a-typography-title>
            <a-typography-paragraph class="w-[300px] m-auto">
              <a-form
                  layout="vertical"
                  :model="formState"
                  name="basic"
                  autocomplete="off"
                  @finish="onFinish"
                  @finishFailed="onFinishFailed"
              >
                <a-form-item
                    label="用户名"
                    name="username"
                    :rules="[{ required: true, message: '请输入用户名' }]"
                >
                  <a-input v-model:value="formState.username"/>
                </a-form-item>

                <a-form-item
                    label="密码"
                    name="password"
                    :rules="[{ required: true, message: '请输入密码' }]"
                >
                  <a-input-password v-model:value="formState.password"/>
                </a-form-item>
                <a-form-item name="remember" class="items-start flex">
                  <a-checkbox v-model:checked="formState.remember">记住我</a-checkbox>
                </a-form-item>
                <a-form-item class="justify-start flex">
                  <a-button type="primary" html-type="submit">登录</a-button>
                  <a-button type="link" html-type="submit">注册新用户</a-button>
                </a-form-item>
              </a-form>
            </a-typography-paragraph>
          </a-typography>
        </div>
      </div>
    </template>
  </Layout>
</template>

<script setup>
import Layout from '../../layout/index.vue'
import {Icon} from "../../utils/Icon.js";
import {onMounted, reactive} from 'vue';
import {useRouter} from "vue-router";
import { message } from 'ant-design-vue';
const $router = useRouter()
const formState = reactive({
  username: 'Hudson',
  password: 'Hudson',
  remember: true,
});
const onFinish = (values) => {
  console.log('Success:', values);
};

const onFinishFailed = (errorInfo) => {
  console.log('Failed:', errorInfo);
};
const contentStyle = {
  textAlign: 'center',
  color: '#fff',
  backgroundColor: '#fff',
};
onMounted(() => {
  setTimeout(() => {
    $router.replace({name: 'list'})
    message.success('登录成功')
  }, 1000)
})
</script>

<style scoped>
.box {
  height: calc(100vh - 64px - 64px);
}

:deep(.ant-form-item-explain-error) {
  display: flex;
  justify-content: flex-start;
}
</style>
